.auto { flex: 1; }
.ui-form { font-size: .16rem; }
.ui-form-row { display: flex; flex-wrap: wrap; margin-top: .2rem; }
.ui-form-row:first-of-type { margin-top: 0; }
.ui-form-item { display: flex; }
.ui-form-item-hd {}
.ui-form-item-bd { flex: 1; }
.ui-form-item-ft {}
.ui-form-item-row { display: flex; }

.ui-form-item-msg { font-size: .14rem; line-height: 2; }
.ui-form-item-msg.invalid { color: #e91212; }
.ui-form-item-msg.valid { color: #39aa49; }

.ui-form-label { display: flex; align-items: center; height: .54rem; }

.ui-form-input { display: flex; }
.ui-form-input > input { box-sizing: border-box; width: 100%; height: .54rem; padding: .05rem .2rem; border: 1px solid #cecece; background-color: #fff; color: #555; font-size: .16rem; border-radius: .06rem; outline: none; transition: border-color .2s, background-color .2s, color .2s; }
.ui-form-input > input::-webkit-input-placeholder { color: #b2b2b2; }
.ui-form-input > input.invalid { color: #e91212; border-color: #e91212; background-color: #fff6f6; }
.ui-form-input > input:focus { color: #000; border-color: #282460; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; }
.ui-form-input > input:disabled,
.ui-form-input > input:read-only { color: #555; border-color: #cecece; background-color: #fff; box-shadow: none; }
.ui-form-input > input:disabled { cursor: not-allowed; background-color: #eee; }

.ui-form-textarea { display: flex; }
.ui-form-textarea > textarea { box-sizing: border-box; width: 100%; min-height: 1.5rem; padding: .15rem .2rem; border: 1px solid #cecece; background-color: #fff; color: #555; font-size: .16rem; border-radius: .06rem; outline: none; transition: border-color .2s, background-color .2s, color .2s; resize: none; }
.ui-form-textarea > textarea::-webkit-input-placeholder { color: #b2b2b2; }
.ui-form-textarea > textarea.invalid { color: #e91212; border-color: #e91212; background-color: #fff6f6; }
.ui-form-textarea > textarea:focus { color: #000; border-color: #282460; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; }
.ui-form-textarea > textarea:disabled,
.ui-form-textarea > textarea:read-only { color: #555; border-color: #cecece; background-color: #fff; box-shadow: none; }
.ui-form-textarea > textarea:disabled { cursor: not-allowed; background-color: #eee; }

.ui-form-select { display: flex; }
.ui-form-select > select { box-sizing: border-box; width: 100%; height: .54rem; border: 1px solid #cecece; color: #555; font-size: .16rem; border-radius: .06rem; background-color: #fff; outline: none; transition: border-color .2s, background-color .2s, color .2s; }
.ui-form-select > select:focus { color: #000; border-color: #282460; }
.ui-form-select > select.invalid { color: #e91212; border-color: #e91212; background-color: #fff6f6; }

.ui-form-checkbox { display: flex; flex-wrap: wrap; margin-left: -0.1rem; }
.ui-form-checkbox > .checkbox-item { display: flex; position: relative; overflow: hidden; margin-left: .1rem; }
.ui-form-checkbox > .checkbox-item > input {
    display: block;
    box-sizing: border-box;
    width: .22rem;
    height: .22rem;
    margin-right: .06rem;
    border: 1px solid #cecece;
    border-radius: .06rem;
    background-color: #fff;
    transition: border-color .2s, background-color .2s, color .2s;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    }
.ui-form-checkbox > .checkbox-item > input:read-only,
.ui-form-checkbox > .checkbox-item > input:disabled { border-color: #cecece; background-color: #fff; }
.ui-form-checkbox > .checkbox-item > input:checked { border-color: #282460; background-color: #282460; }
.ui-form-checkbox > .checkbox-item > input:checked + label::before { opacity: 1; transform: rotate(45deg) scale(1); }
.ui-form-checkbox > .checkbox-item:hover > input:not(:disabled,:read-only),
.ui-form-checkbox > .checkbox-item:active > input:not(:disabled,:read-only) { border-color: #282460; }
.ui-form-checkbox > .checkbox-item > input + label { position: relative; }
.ui-form-checkbox > .checkbox-item > input + label::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -0.21rem;
    box-sizing: border-box;
    width: .08rem;
    height: .13rem;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    opacity: 0;
    transform: rotate(45deg) scale(0);
    transition: transform .2s, opacity .2s;
    }

.ui-form-checkbox > .checkbox-item > label { display: flex; flex: 1; color: #666; font-size: .16rem; line-height: 1.5; }
.ui-form-checkbox > .checkbox-item a { margin-left: .05rem; margin-right: .05rem; color: #0b5ecf; }
.ui-form-checkbox > .checkbox-item a:hover,
.ui-form-checkbox > .checkbox-item a:active { text-decoration: underline; }

.ui-form-code { display: flex; height: .54rem; }
.ui-form-code > img { width: 1rem; height: 100%; border-radius: .06rem; background-color: #dedede; cursor: pointer; }
.ui-form-code > button { position: relative; width: .24rem; height: 100%; margin-left: .2rem; text-indent: -999em; transition: border-color .2s, background-color .2s, color .2s; overflow: hidden; }
.ui-form-code > button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('') center no-repeat;
    transition: transform .2s;
    }
.ui-form-code > button:hover::after,
.ui-form-code > button:active::after,
.ui-form-code > button:focus::after { transform: rotate(360deg); }

.ui-form-button { display: flex; flex: 1; }
.ui-form-button > button { flex: 1; position: relative; z-index: 1; height: .68rem; box-sizing: border-box; padding-left: .2rem; padding-right: .2rem; margin-left: .2rem; border: none; border-radius: .06rem; color: #fff; font-size: .22rem; font-weight: 600; background-color: #282460; outline: none; user-select: none; transition: background-color .2s, color .2s; }
.ui-form-button > button:first-of-type { margin-left: 0; }
.ui-form-button > button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: rgba(0, 0, 0, .2);
    box-shadow: 0 2px .04rem rgba(0, 0, 0, .5) inset;
    opacity: 0;
    transition: opacity .2s;
    }
.ui-form-button > button:hover::after,
.ui-form-button > button:active::after,
.ui-form-button > button:focus::after { opacity: 1; }
.ui-form-button > button[disabled],
.ui-form-button > button:disabled { color: #aaa; background-color: #ccc; cursor: not-allowed; }
.ui-form-button > button[disabled]::after,
.ui-form-button > button:disabled::after { display: none; }

.ui-form-icon { display: block; width: .54rem; height: .54rem; background: center no-repeat; background-size: .2rem auto; text-indent: -999em; }

.ui-form-tip { display: flex; justify-content: center; align-items: center; box-sizing: border-box; min-height: .54rem; padding: .1rem .2rem; border: 1px solid #cecece; border-radius: .06rem; color: #555; font-size: .16rem; line-height: 1.5; background-color: #fafafa; }
.ui-form-tip::before {
    content: '';
    display: block;
    width: .26rem;
    height: .34rem;
    margin-right: .12rem;
    background: center no-repeat;
    background-size: 100% auto;
    }
.ui-form-tip.warn { color: #fd8238; border-color: #feb693; background-color: #fff7f0; }
.ui-form-tip.warn::before { background-image:url(''); }

.ui-form-text { display: flex; align-items: center; justify-content: center; height: .54rem; color: inherit; font-size: inherit; line-height: 1.5; border: none; background: none; outline: none; }
.ui-form-text.abs { position: absolute; top: 0; right: 0; }
